<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>维修保障设备</title>
		<link type="text/css" href="/css/content.css" rel="stylesheet" />
		<link type="text/css" href="/css/animation.css" rel="stylesheet" />
		<script type="text/javascript" src="/js/jquery.js" ></script>
		<script type="text/javascript" src="/js/animation.js"></script>
		<script type="text/javascript" src="/js/public.js"></script>
		<script type="text/javascript" src="/js/highcharts.js"></script>
        <script type="text/javascript" src="/js/highcharts-3d.js"></script>
       <script  th:inline="javascript">
        /*<![CDATA[*/
        	$(function(){
        		 var ywc=[[${ywc}]];
        	     var wwc=[[${wwc}]];
        		$('#container').highcharts({
			        chart: {
			        	 plotShadow: false,
			             type: 'pie'
			        },
			        title: {
			            text: '<b>某某装备</b>'
			        },
			        tooltip: {
			            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			        },
			        plotOptions: {
			            pie: {
			                allowPointSelect: true,
			                cursor: 'pointer',
			                dataLabels: {
			                    enabled: true,
			                    format: '{point.name}: <b>{point.y}</b>'
			                },
			                showInLegend: true
			            }
			        },
			        series: [{
			            name: '百分比',
			            colorByPoint: true,
			            data: [{
			                name: '已完成',
			                y: ywc,
			                color:'#3db9d3'
			            }, {
			                name: '未完成',
			                y: wwc,
			                color:'#fc6e51'
			            }]
			        }]
			    });
        	})
        	  /*]]>*/ 
        </script>
	</head>
	<body>
		<!--返回-->
		<div class="back" onclick="location='/zbdzll'"><img src="/images/back.png" /></div>
		<div th:include="header :: header"></div>
		<div class="header-title">
			<span>装备电子履历统计</span>
		</div>
		<div class="spare-a">
			<div class="spare-al">
				<div style="height:10px"></div>
				<ul>
					<a href="/Maint/zbdzll-wwctj">
					<li class="active">
						<p>未完成统计</p>
					</li>
					</a>
					<a href="/Maint/zbdzll-hjtj">
					<li>
						<p>换件统计</p>
					</li>
					</a>
				</ul>
			</div>
			<div class="spare-ar">
				<div class="zbdzll">
					<div class="zbdzll-a clearfix">
						<div class="zbdzll-al">未完成统计</div>
						<div class="zbdzll-ar">计划总数：<b  th:text="@{(${wwc} ? (${ywc}?(${wwc}+${ywc}):${wwc}): '0')}">7</b><span>已完成：<b th:text="@{(${ywc} ? ${ywc}: '0')}">4</b></span><span>未完成：<b th:text="@{(${wwc} ? ${wwc}: '0')}">3</b></span></div>
					</div>
					<div class="zbdzll-b">
						<div id="container" style="width:100%;height:500px"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
